<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<form method="post" action="#">
    茶叶名称：<input name="teaName" id="teaName"><br/>
    茶叶类别id：<input name="teaTypeId" id="teaTypeId"><br/>
    描述：<input name="description" id="description"><br/>
    排序：<input name="ordered" id="ordered"><br/>
    状态：<input name="status" id="status"><br/>
    <!--<input type="submit" value="添加">-->
    <!--我们要实现，点击button按钮，实现触发某个JavaScript事件(click事件)，然后执行js函数。
    函数里面1是获取form表单里面的数据。2是提交请求。-->
    <!--<button id="btn">添加</button>-->
    <input type="button" id="btn" value="添加">
</form>


<script>


    //为id="btn"的按钮，添加事件，点击触发，那么就是onclike事件
    /*
    1、用户在输入框(input)输入内容
    2、用户点击添加按钮
    3、点击按钮后，触发onclick事件，从而执行对应function函数
    4、在函数中通过doc.getElementByid()获取到那个输入框的id对应的value值。
    5、通过alert把值用弹窗显示出来。
     */
    document.getElementById("btn").onclick=function (){
        //1.获取form表单里面的数据，把这些数据封装成一个formData对象
        // 将表单数据转为json
        //var声明全局变量
        var formData = {
            teaName: "",
            teaTypeId: "",
            description: "",
            ordered: "",
            status: ""
        };
        //let声明局部变量
        let teaName=document.getElementById("teaName").value;
        //alert(teaName);
        let teaTypeId=document.getElementById("teaTypeId").value;
        let description=document.getElementById("description").value;
        let ordered=document.getElementById("ordered").value;
        let status=document.getElementById("status").value;
        formData.teaName=teaName;
        formData.teaTypeId=teaTypeId;
        formData.description=description;
        formData.ordered=ordered;
        formData.status=status;
        //2.发送请求给后端接口
        //axios.post("/teas").then();
        axios({
            method: "post",
            url: "/teas",
            data: formData
        }).then(function (resp) {//回调函数，resp是后端返回给前端的响应(添加成功之后返回的响应)
            //判断resp.date==1，还是等于0
            if(resp.data==1){
                location.href='./teas.html'
            }else {
                alert("添加失败...")
            }
        })
    }







</script>
</body>
</html>